<template>
  <aside
    class="w-full lg:w-1/5 lg:block fixed lg:relative inset-0 mt-16 lg:mt-0 z-30 bg-white dark:bg-gray-900 lg:bg-transparent"
  >
    <div
      class="lg:sticky lg:top-16 overflow-y-auto h-full lg:h-auto lg:max-h-(screen-16)"
    >
      <ul class="p-4 lg:py-8 lg:pl-0 lg:pr-8">
        <li class="mb-4 lg:hidden">
          <CompSearch></CompSearch>
        </li>
        <li
          v-for="(docs, category, index) in categories"
          :key="category"
          class="mb-4"
          :class="{ 'lg:mb-0': index === Object.keys(categories).length - 1 }"
        >
          <h3
            class="mb-2 text-gray-500 uppercase tracking-wider font-bold text-sm lg:text-xs"
          >
            {{ category }}
          </h3>
          <ul>
            <li
              v-for="doc of docs"
              :key="doc.path"
              class="text-gray-700 dark:text-gray-300"
            >
              <NuxtLink
                :to="localePath(doc.to)"
                class="px-2 rounded font-medium py-1 hover:text-primary-500 flex items-center justify-between"
                exact-active-class="text-primary-500 bg-primary-100 hover:text-primary-500 dark:bg-primary-900"
              >
                {{ doc.menuTitle || doc.title }}
                <client-only>
                  <span
                    v-if="isNew(doc)"
                    class="animate-pulse rounded-full bg-primary-500 opacity-75 h-2 w-2"
                  />
                </client-only>
              </NuxtLink>
            </li>
          </ul>
        </li>
        <li class="lg:hidden">
          <h3
            class="mb-2 text-gray-500 uppercase tracking-wider font-bold text-sm lg:text-xs"
          >
            More
          </h3>
          <div class="flex items-center ml-2">
            <a
              v-if="settings.github"
              :href="`https://github.com/${settings.github}`"
              target="_blank"
              rel="noopener noreferrer"
              title="Github"
              class="inline-flex text-gray-700 dark:text-gray-300 hover:text-primary-500 mr-4"
            >
              <SvgIconGithub class="w-5 h-5" />
            </a>

            <NcIconSwitchLang class="mr-4" />
            <BtnSwitchColor />
          </div>
        </li>
      </ul>
    </div>
  </aside>
</template>

<script>
import { mapGetters } from 'vuex'
import CompSearch from '~/components/layout-comp/CompSearch'
import SvgIconGithub from '~/components/global/svg/SvgIconGithub'
import NcIconSwitchLang from '~/components/global/icon/NcIconSwitchLang'

export default {
  name: 'CompNav',
  components: {
    CompSearch,
    SvgIconGithub,
    NcIconSwitchLang,
  },
  computed: {
    ...mapGetters(['settings']),
    categories() {
      return this.$store.state.categories[this.$i18n.locale]
    },
  },
  methods: {
    isNew(document) {
      if (process.server) {
        return
      }
      if (!document.version || document.version <= 0) {
        return
      }

      const version = localStorage.getItem(`document-${document.slug}-version`)
      return document.version > Number(version)
    },
  },
}
</script>
